<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery vs MooTools</title>
<link rel="stylesheet" href="../css/reset.css" type="text/css" />
<link rel="stylesheet" href="../css/prettify.css" type="text/css" />
<script type="text/javascript" src="../js/prettify.js"></script>
</head>
<body onLoad="prettyPrint();">
<table border="1" summary="jQuery vs MooTools">
  <caption>
  <h1>jQuery vs MooTools</h1>
  </caption>
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">jQuery</th>
    <th scope="col">MooTools</th>
  </tr>
  <tr>
    <th scope="row">ready</th>
    <td><pre class="prettyprint linenums">jQuery(document).ready(function () {
  jQuery("#qqwp2").html('jQuery方法'+qqAllHtml);
})</pre></td>
    <td><pre class="prettyprint linenums">document.addEvent('domready',function(){
  $('qqwp1').set('html', 'MooTools方法'+qqAllHtml);
})</pre></td>
  </tr>
  <tr>
    <th scope="row">选择器</th>
    <td>$()</td>
    <td>$$()</td>
  </tr>
  <tr>
    <th scope="row">常用方法</th>
    <td><pre class="prettyprint linenums">children() 
siblings() 
parent() 
parents() 
prev()
next()
first()
last()
……
……
css()
……
</pre></td>
    <td><pre class="prettyprint linenums">getChildren()
getSiblings() 
getParent() 
getParents()
getPrevious()
getNext()
getFirst()
getLast()
get()
set()
getStyle()
setStyle()</pre></td>
  </tr>
  <tr>
    <th scope="row">事件</th>
    <td><pre class="prettyprint linenums">click()
dbclick()
mouseover()</pre></td>
    <td><pre class="prettyprint linenums">addEvent('click')
addEvent('mouseover')</pre></td>
  </tr>
  <tr>
    <th scope="row">css class 方法</th>
    <td><pre class="prettyprint linenums">hasClass()
addClass()
removeClass()
toggleClass()</pre></td>
    <td><pre class="prettyprint linenums">hasClass()
addClass()
removeClass()
toggleClass()</pre></td>
  </tr>
  <tr>
    <th scope="row">遍历</th>
    <td>可以不使用each()</td>
    <td>必须使用each()</td>
  </tr>
  <tr>
    <th scope="row">sliding</th>
    <td><pre class="prettyprint linenums">
$(document).ready(function() {
  $('h2').click(function() {
    $(this).parent().toggleClass('active');
    $(this).parent().siblings().each(function() {
      $(this).removeClass('active');
    })
  })
})
    </pre></td>
    <td><pre class="prettyprint linenums">
window.addEvent('domready', function() {
  $$('.q').each(function(question){
    question.addEvent('click', function() {
      question.getParent().toggleClass('show');
      question.getParent().getSiblings().each(function(other){
          other.removeClass('show');
      })
    })
  })
});
    </pre></td>
  </tr>
  <tr>
    <th scope="row">tabbed</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
